
/**
 * Created by showtan on 2018/12/27.
 * 任务详情
 */


export default class TaskDetail extends Component {
  static navigationOptions = ({ navigation }) => ({
    headerTitle: '任务详情',
    headerTitleStyle: { alignSelf: 'center', textAlign: 'center', flex: 1, color: '#fff' },
    headerStyle: { backgroundColor: themeColor },
    headerRight: (navigation.state.params.name == 0 || navigation.state.params.name == 1 || navigation.state.params.name == 6) ?
      <TouchableOpacity onPress={() => navigation.state.params.back()} style={{ width: adapt(65), height: adapt(65), justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ color: '#fff', fontSize: adapt(16), fontWeight: '600' }}>退单</Text>
      </TouchableOpacity> : <View style={{ width: adapt(50) }} />,
    headerLeft: <TouchableOpacity style={{ height: isIOS ? adapt(40) : adapt(50), width: adapt(50), justifyContent: 'center' }} activeOpacity={.5} onPress={() => navigation.goBack()}>
      <Image source={Images.common.icon_back} style={{ height: adapt(21), width: adapt(12), marginLeft: adapt(20), tintColor: '#fff' }} />
    </TouchableOpacity>
  });
  constructor(props) {
    super(props);
    this.status = this.props.navigation.state.params.name;
    this.state = {
      signStatus: (this.status == 2 || this.status == 3) ? 1 : 0
    }
  }
  componentDidMount() {
    this.props.navigation.setParams({ back: this.back });
  }
  back = () => {
    (this.status == 0 || this.status == 6) && Alert.alert(
      '确定退单？',
      '一天只能退一次单',
      [
        { text: '取消', style: 'cancel' },
        { text: '确定', onPress: () => Toast.success('退单成功') },
      ],
      { cancelable: false }
    );
    this.status == 1 && ((Math.ceil(Math.random() * 2) > 1) ? Toast.fail('已超出退单时间') : Alert.alert(
      '确定退单？',
      '一天只能退一次单',
      [
        { text: '取消', style: 'cancel' },
        { text: '确定', onPress: () => Toast.success('退单成功') },
      ],
      { cancelable: false }
    ));
  }
  render() {
    // 0 今日未完成 1 本月未完成 2 今日已完成 3 本月已完成 4 我发布 5 抢单 6 指派
    let detail = [
      { name: '任务名称', value: '示范从园区4楼的撒带划等号狻12' },
      { name: '类型', value: '人工1' },
      { name: '紧急状态', value: '不紧急' },
      { name: '目前状态', value: '尚未处理' },
      { name: '客户地址', value: '飒飒都啊的撒大大2411224' },
      { name: '客户联系电话', value: '18202938418' },
      { name: '任务说明', value: '无' },
      { name: '接单人', value: this.status == 5 ? '暂无接单人' : this.status == 4 ? '暂无/某某某' : '本人' },
      { name: this.status == 4 ? '接单人电话' : '发布人', value: this.status == 4 ? '暂无/某某某电话' : '某某某' },
      { name: '是否签单', value: '' },
    ];
    return (
      <View style={styles.container}>
        <ScrollView showsVerticalScrollIndicator={false} style={styles.container1}>
          {
            detail.map((item, index) => {
              return (
                <View key={index}>
                  {this.status == 5 && index != 9 && <View style={[styles.itemCell, index == 0 && { marginTop: adapt(20) }, (this.status != 5 && index == 9 || (this.status == 5 && index == 8)) && { borderBottomWidth: 0 }]}>
                    <Text style={{ color: '#444', fontSize: adapt(16) }}>{item.name}:</Text>
                    <Text selectable={true} onPress={() => index == 5 && Linking.openURL('tel:' + '18202938418').catch(e => { })}
                      style={[{ color: '#6e6e6e', alignSelf: 'flex-start', marginTop: adapt(4) }, index == 5 && { color: 'blue', textDecorationLine: 'underline' }]}>{item.value}</Text>
                  </View>}
                  {this.status != 5 && index != 9 && <View style={[styles.itemCell, index == 0 && { marginTop: adapt(20) }, (this.status != 5 && index == 9 || (this.status == 5 && index == 8)) && { borderBottomWidth: 0 }]}>
                    <Text style={{ color: '#444', fontSize: adapt(16) }}>{item.name}:</Text>
                    <Text selectable={true} onPress={() => index == 5 && Linking.openURL('tel:' + '18202938418').catch(e => { })}
                      style={[{ color: '#6e6e6e', alignSelf: 'flex-start', marginTop: adapt(4) }, index == 5 && { color: 'blue', textDecorationLine: 'underline' }]}>{item.value}</Text>
                  </View>}
                  {this.status != 5 && index == 9 && this.status != 6 &&
                    <View style={[styles.itemCell, index == 0 && { marginTop: adapt(20) }, (this.status != 5 && index == 9 || (this.status == 5 && index == 8)) && { borderBottomWidth: 0 }]}>
                      <Text style={{ color: '#444', fontSize: adapt(16) }}>{item.name}:</Text>
                      <View style={{ flexDirection: 'row', marginTop: adapt(4) }}>
                        <TouchableOpacity onPress={() => this.status != 2 && this.status != 3 && this.setState({ signStatus: this.state.signStatus == 1 ? 0 : 1 })} activeOpacity={.6} style={styles.commonCell}>
                          <View style={styles.circleCell}>
                            <View style={[styles.backgroundColorCircle, this.state.signStatus == 1 && { backgroundColor: '#4a4a4a' }]} />
                          </View>
                          <Text style={[styles.commonText, { marginLeft: adapt(4) }]}>已签单</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => this.status != 2 && this.status != 3 && this.setState({ signStatus: this.state.signStatus == 2 ? 0 : 2 })} activeOpacity={.6} style={[styles.commonCell, { marginLeft: adapt(43) }]}>
                          <View style={styles.circleCell}>
                            <View style={[styles.backgroundColorCircle, this.state.signStatus == 2 && { backgroundColor: '#4a4a4a' }]} />
                          </View>
                          <Text style={[styles.commonText, { marginLeft: adapt(4) }]}>未签单</Text>
                        </TouchableOpacity>
                      </View>
                    </View>}
                </View>
              )
            })
          }
        </ScrollView>
        {
          (this.status != 2 && this.status != 3) && <TouchableOpacity onPress={() => {
            this.status == 6 && Toast.success('可以开始任务了');
            this.status == 5 && Toast.success('接单成功');
            this.status == 4 && Toast.success('取消成功');
            if (this.status == 0 || this.status == 1) {
              this.state.signStatus ? Alert.alert(
                '确认已完成任务？',
                '确认后任务状态无法更改',
                [
                  { text: '取消', style: 'cancel' },
                  { text: '确定', onPress: () => Toast.success('任务完成') },
                ],
                { cancelable: false }
              ) : Toast.fail('你还未选择是否签单');
            }
          }} activeOpacity={.8} style={[styles.bottomCell, this.status < 5 && this.status > 1  && { backgroundColor: '#f2413f' }]}>
            <Text style={{ color: '#fff', fontWeight: '500', fontSize: adapt(16), marginTop: adapt(14) }}>{(this.status == 0 || this.status == 1) ? '任务完成' : this.status == 4 ? '取消' : this.status == 5 ? '抢单' : '开始任务'}</Text>
          </TouchableOpacity>
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ededed'
  },
  container1: {
    flex: 1,
    backgroundColor: '#fff'
  },
  itemCell: {
    height: adapt(70),
    marginHorizontal: adapt(25),
    justifyContent: 'center',
    borderBottomWidth: adapt(1),
    borderColor: '#ddd'
  },
  bottomCell: {
    width: width,
    bottom: 0,
    height: isIphoneX() ? adapt(80) : adapt(50),
    backgroundColor: '#00c2ef',
    alignItems: 'center'
  },
  circleCell: {
    height: adapt(15),
    width: adapt(15),
    borderWidth: adapt(1),
    borderColor: '#4a4a4a',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: adapt(7.5)
  },
  commonCell: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  commonText: {
    color: '#4a4a4a',
    fontSize: adapt(12)
  },
  backgroundColorCircle: {
    height: adapt(11),
    width: adapt(11),
    backgroundColor: '#fff',
    borderRadius: adapt(5.5)
  },
});
